<script setup>
import{getExamDetailService,
    subExamDetailService,
    getExamIdByUserIdService,
    getExamResService
} from '@/api/LoginManager.js'
import {
    Platform,
    Star,
    Bell
} from '@element-plus/icons-vue'
import {ref} from 'vue'
import { useUserStore } from '@/stores/user';
const userStore = useUserStore()
const params = ref({
    courseId:''
})

const userRef = ref({
    userId:''
})
const ExamParams = ref({
    examId:''
})
const ExamVo = ref({
      id:'',
      examName:'',
      examDesc:'',
      examTime:'',
      examTimeStr:'',
      status:'',
      examTitleVo:[]
})
const examTitleVoList = ref([])
const ExamTitleVo = ref({
      id:'',
      examTitle:'',
      examType:'',
      examTypeStr:'',
      examOption:'',
      options:[],
      examPoint:'',
      selectedOption:''
})

const getExamDetail = async () => {
    userRef.value.userId = userStore.token
    const userRes = await getExamIdByUserIdService(userRef.value);
    ExamParams.value.examId = userRes.data.data
    const res = await getExamDetailService(ExamParams.value);
    ExamVo.value = res.data.data
    examTitleVoList.value = ExamVo.value.examTitleVo
}
getExamDetail()

const subParam = ref({
    list:[]
})
const subParams = ref([])
const subParamsVo = ref({
      userId:userStore.token,
      examTitleId:'',
      examTitleValue:'',
      examTitlePoint:''
})
const trans = () => {
    examTitleVoList.value.forEach(item => {  
        const newSubParam = { ...subParamsVo.value }; // 使用扩展运算符复制subParamsVo的结构  
        newSubParam.userId = userStore.token
        newSubParam.examTitleId = item.id;  
        newSubParam.examTitleValue = item.selectedOption;  
        newSubParam.examTitlePoint = item.examPoint;  
        subParams.value.push(newSubParam); // 将新对象添加到subParams数组中  
  }); 
}
const examSub = async () => {
    subParams.value = []
    trans();
    subParam.value.list = subParams.value
    console.log(subParams.value)
    await subExamDetailService(subParam.value)
    ElMessage.success('成功！')
}

const userPoint = ref()
const getExamRes = async () => {
    userRef.value.userId = userStore.token
    console.log("userRef" + userRef)
    const res = await getExamResService(userRef.value);
    userPoint.value = res.data.data
}
getExamRes()
</script>

<template>


    <!-- 需求基本信息 -->
    <div class="cus-task-detail-info">
        <el-row :gutter="20">
            <el-col :span="19">
                <div class="content-left">
                    <div class="cus-detail-content-header">
                        <div class="cus-margin-border">
                            <h1 v-if="userPoint">{{userPoint  }}</h1>
                            <h1 v-else>{{ExamVo.examName  }}</h1>
                        </div>

                        <div class="cus-margin-border">
                            <span style="font-size: 24px;">{{ExamVo.examDesc  }}</span>
                        </div>
                    </div>
                    <div class="cus-detail-content">

                        <div v-for="vo in examTitleVoList" :key="vo.id">
                            <div class="title">
                                {{ vo.examTitle }}
                            </div>
                            <div v-if="vo.examType === '2'" style="margin-top: 5px; width: 500px;">
                                <el-input
                                type="textarea"
                                :autosize="{ minRows: 2, maxRows: 4}"
                                placeholder="请输入内容"
                                v-model="vo.selectedOption">
                                </el-input>
                            </div>
                            <div>
                                <el-radio-group v-model="vo.selectedOption">  
                                    <el-radio  
                                        v-for="(option, optionIndex) in vo.options"  
                                        :key="optionIndex"  
                                        :label="option"  
                                    >  
                                        {{ option }}  
                                    </el-radio>  
                                </el-radio-group>  
                            </div>
                            <el-divider />
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="5">
                <div class="right">
                    <div style="min-height: 50px;">
                        <div style="display: flex;justify-content: start;">
                            <el-button type="primary" @click="examSub">试卷提交</el-button>
                        </div>
                    </div>
                    <div style="margin-bottom: 20px;">
                        开课时间:{{ ExamVo.examTimeStr }}
                    </div>
                    <div style="margin-bottom: 20px;">
                        
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>


</template>

<style lang="scss" scoped>
ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

ul li {
    display: block;
    height: 45px;
    line-height: 45px;
    padding-left: 10px;
}

.cus-task-deail-image {
    margin-top: 20px;

    .grid-content {
        border-radius: 4px;
    }
}


.cus-task-detail-info {
    margin-top: 30px;

    .content-left {
        .cus-detail-content-header {
            display: flex;
            flex-direction: column;
            padding: 20px;
            min-height: 200px;
            background: linear-gradient(to bottom, #C0E6FF, white);

            .cus-margin-border {
                margin-bottom: 20px;
            }
        }

        .cus-detail-content {
            padding: 20px;
            min-height: 1000px;
            background-color: #fff
        }
    }
    .right {
        box-sizing: border-box;
        padding: 20px;
        background-color: #fff;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
    }
}

.cus-task-deatail-main {
    margin-top: 30px;

    .content-left {
        background-color: #fff;
        height: 300px;
    }
}
</style>